<template>
  <div>
    <TableBar :columns="columns" :layout="layout">
      <div slot="top">
        <el-form label-width="120px" :model="searchMap">
          <el-row :gutter="20">
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="投入品名称：">
                <el-select v-model="searchMap.name" placeholder="请选择投入品">
                  <el-option
                    v-for="item in supplylist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="sku编号：">
                <el-input v-model="searchMap.skuNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="供应商：">
                <el-select
                  v-model="searchMap.supplierName"
                  placeholder="请选择供应商"
                >
                  <el-option
                    v-for="item in supplierlist"
                    :key="item.id"
                    :label="item.supplierName"
                    :value="item.supplierName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="投入品类型：">
                <el-input v-model="searchMap.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="19" :sm="12" :lg="7">
              <el-form-item label="投入品品种：">
                <el-input v-model="searchMap.species"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin-bottom: 5px">
          <el-col :span="3" :offset="21"
            ><el-button
              size="small"
              type="primary"
              @click="fuzzyQuery"
              v-auth="'breed_input_supplier_select'"
              >搜索</el-button
            >
            <el-button
              size="small"
              @click="resetSerch"
              v-auth="'breed_input_supplier_select'"
              >重置</el-button
            ></el-col
          >
        </el-row>
      </div>
      <el-row slot="bottom" :gutter="19" type="flex">
        <el-col :span="7"
          ><el-button
            type="danger"
            size="small"
            plain
            @click="dialogVisible = true"
            v-auth="'breed_input_supplier_insert'"
            >新增</el-button
          ></el-col
        >
        <el-col :span="14"
          ><el-tooltip
            effect="dark"
            content="导入投入品入库信息"
            placement="top-start"
            ><el-upload
              action="http://120.77.156.205:9603/breed/merchant/supply/excel/add"
              :show-file-list="false"
              ><el-button
                type="primary"
                class="el-icon-upload el-icon--right"
                size="small"
                v-auth="'breed_input_supplier_update'"
                @click="getTableInfo"
                >信息导入</el-button
              ></el-upload
            ></el-tooltip
          ></el-col
        >
        <el-col :span="7"
          ><download-excel
            :data="selectedData"
            name="投入品信息"
            :fields="json_fields"
            ><el-button
              type="primary"
              size="small"
              :disabled="this.selectList.length <= 0"
              @click="downLoadExcel"
              v-auth="'breed_input_supplier_select'"
              >下载</el-button
            >
          </download-excel></el-col
        >
        <el-col :span="7">
          <el-tooltip effect="dark" content="批量删除投入品信息">
            <el-button
              type="danger"
              size="small"
              :disabled="this.selectList.length <= 0"
              v-auth="'breed_input_supplier_delete'"
              @click="removeBatch"
              class="el-icon-delete-solid"
            ></el-button
          ></el-tooltip>
        </el-col>
      </el-row>
    </TableBar>
    <Table
      :columns="columns"
      :showPage="showPage"
      ref="tableRef"
      :page.sync="page"
      :data="tableData"
      @selectData="selectData"
      @select-all-event="selectAllEvent"
      @changeSize="
        (size) => {
          this.page.pageSize = size.pageSize;
          if (this.isSearchMap) {
            this.fuzzyQuery();
          }
          this.getTableInfo();
        }
      "
      @changePage="
        (page) => {
          this.page.current = page.current;
          if (this.isSearchMap) {
            this.fuzzyQuery();
          }
          this.getTableInfo();
        }
      "
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          type="selection"
          v-if="index === 1"
          effect="dark"
          fixed="left"
          placement="top-start"
          class="item"
        >
        </el-table-column>
        <el-table-column
          label="照片"
          width="180"
          fixed="left"
          v-if="index === 0 && item.show"
        >
          <template slot-scope="scope">
            <el-image class="supplyPic" :src="scope.row.picture"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          :label="item.name"
          v-if="item.show && index > 0"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      <el-table-column label="二维码" width="75" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            class="el-icon-full-screen"
            @click="expandQrCode(scope.row.qrCode)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="修改投入品信息"
            placement="top-start"
          >
            <el-button
              size="mini"
              class="el-icon-edit"
              @click="getOneSupply(scope.row.id)"
              v-auth="'breed_input_supplier_update'"
            ></el-button>
          </el-tooltip>
          <el-button
            type="danger"
            size="mini"
            class="el-icon-delete"
            v-auth="'breed_input_supplier_delete'"
            @click="removeOne(scope.row.id)"
          ></el-button>
        </template> </el-table-column
    ></Table>
    <el-dialog
      title="投入品二维码"
      :visible.sync="picDialogVisible"
      width="31%"
    >
      <div class="demo-image__preview">
        <el-image :lazy="true" :src="qrCodePic" :preview-src-list="srcList">
        </el-image>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="editDialogVisible"
      title="修改投入品信息"
      @close="closeEvent"
      :destroy-on-close="true"
    >
      <el-form
        :model="editInfo"
        ref="formRef"
        label-width="125px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12"
            ><el-form-item label="投入品名称" prop="name">
              <el-input v-model="editInfo.name"></el-input></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品类型">
              <el-input v-model="editInfo.type"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="供应商" prop="supplierName">
              <el-select
                v-model="editInfo.supplierName"
                placeholder="请选择"
                @change="changeEvent"
              >
                <el-option
                  v-for="(item, index) in supplierlist"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="index"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="单价" prop="unitPrice">
              <el-input v-model="editInfo.unitPrice"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="包裹类型" prop="packageType">
              <el-input v-model="editInfo.packageType"></el-input></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="sku编号" prop="skuNumber">
              <el-input v-model="editInfo.skuNumber"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="投入品等级" prop="grade">
              <el-select v-model="editInfo.grade" placeholder="请选择">
                <el-option
                  v-for="item in gradeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品品种" prop="species">
              <el-input v-model="editInfo.species"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="最佳口感天数" prop="bestTasteDay">
              <el-input-number
                controls-position="right"
                v-model="editInfo.bestTasteDay"
                placeholder="最佳口感天数"
              >
              </el-input-number> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品保质天数" prop="expirationDate">
              <el-input-number
                v-model="editInfo.expirationDate"
                controls-position="right"
              ></el-input-number> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="投入品规格" prop="specification">
              <el-select v-model="editInfo.specification" placeholder="请选择">
                <el-option
                  v-for="item in specificationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select></el-form-item
          ></el-col>
        </el-row>
        <AddressChoose @fatherMethods="getArea" :areaObject="areaObject" />
        <el-row>
          <el-col :span="24">
            <el-form-item label="投入品介绍" prop="introduction">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入介绍"
                v-model="editInfo.introduction"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="二维码">
            <el-upload
              class="avatar-uploader"
              action="http://120.77.156.205:9610/file/upload"
              :show-file-list="false"
              :on-success="editqrCodeSuccess"
            >
              <img
                v-if="editInfo.qrCode"
                :src="editInfo.qrCode"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="投入品图片">
            <el-upload
              class="upload-demo"
              action="http://120.77.156.205:9610/file/upload"
              :on-success="changePictureSuccess"
            >
            <img
                v-if="editInfo.picture"
                :src="editInfo.picture"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editShopSupply">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      @close="closeEvent1"
      title="增加投入品信息"
      :visible.sync="dialogVisible"
    >
      <el-form :model="addInfo" ref="addRef" label-width="125px" :rules="rules">
        <el-row>
          <el-col :span="12"
            ><el-form-item label="投入品名称" prop="name">
              <el-input v-model="addInfo.name"></el-input></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品类型" prop="type">
              <el-input v-model="addInfo.type"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="供应商" prop="supplierName">
              <el-select
                v-model="addInfo.supplierName"
                placeholder="请选择"
                @change="changeEvent1"
              >
                <el-option
                  v-for="(item, index) in supplierlist"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="index"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="单价(RMB)" prop="unitPrice">
              <el-input-number
                controls-position="right"
                v-model="addInfo.unitPrice"
              ></el-input-number></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="包裹类型" prop="packageType">
              <el-input v-model="addInfo.packageType"></el-input></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="sku编号" prop="skuNumber">
              <el-input v-model="addInfo.skuNumber"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="投入品等级" prop="grade">
              <el-select v-model="addInfo.grade" placeholder="请选择">
                <el-option
                  v-for="item in gradeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品品种" prop="species">
              <el-input v-model="addInfo.species"></el-input></el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="最佳口感期(天)" prop="bestTasteDay">
              <el-input-number
                controls-position="right"
                v-model="addInfo.bestTasteDay"
                placeholder="请输入最佳口感天数"
              >
              </el-input-number> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品保质天数" prop="expirationDate">
              <el-input-number
              controls-position="right"
                v-model="addInfo.expirationDate"
                placeholder="请输入保质天数"
              >
              </el-input-number> </el-form-item
          ></el-col>
        </el-row>
        <el-row>

          <el-col :span="12"
            ><el-form-item label="投入品规格" prop="specification">
              <el-select v-model="addInfo.specification" placeholder="请选择">
                <el-option
                  v-for="item in specificationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
              </el-form-item
          ></el-col>
        </el-row>
        <AddressChoose ref="addressRef" @fatherMethods="getArea" :areaObject="areaObject" />
        <el-row>
          <el-col :span="24">
            <el-form-item label="投入品介绍" prop="introduction">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入介绍"
                v-model="addInfo.introduction"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="二维码">
            <el-upload
              class="avatar-uploader"
              action="http://120.77.156.205:9610/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="addInfo.qrCode" :src="addInfo.qrCode" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="投入品图片">
            <el-upload
              class="upload-demo"
              drag
              action="http://120.77.156.205:9610/file/upload"
              multiple
              :on-success="handlePictureSuccess"
            >
              <i class="el-icon-upload"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSupplyEvent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState ,mapActions} from "vuex";
import Table from "../../common/TheTable";
import {
  editSupply,
  addShopSupply,
  getOneSupplyInfo,
  getShopSupplyByPage,
  deleteShopSupply,
  changeStatus,
  deleteShopSupplyBatch,
} from "../../../Api/productionmanage/shop_supply";
import { vagueSearchShopSupply } from "../../../Api/productionmanage/index";
import AddressChoose from "../public/AddressChoose";
export default {
  name: "SupplierGoods", //供应商投入品信息
  components: {
    Table,
    AddressChoose,
  },
  data() {
    return {
      columns: [
        { name: "投入品照片", show: true, prop: "picture" },
        { name: "供应商", show: true, prop: "supplierName" },
        { name: "投入品名称", show: true, prop: "name" },
        { name: "SKU编号", show: true, prop: "skuNumber" },
        { name: "价格(￥)", show: true, prop: "unitPrice" },
        { name: "包裹类型", show: false, prop: "packageType" },
        { name: "投入品类型", show: false, prop: "type" },
        { name: "投入品规格", show: false, prop: "specification" },
      ],
      
      layout: "search, refresh, column",
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      qrCodePic: "",
      dialogVisible: false,
      editDialogVisible: false,
      picDialogVisible: false,
      showPage: true, // 显示分页
      //所选择的入库信息
      selectList: [],
      editInfo: {},
      areaObject: {},
      addInfo: {
        qrCode: "",
      },
      srcList: [],
      tableData: [],
      isSearchMap: false,
      searchMap: {
        skuNumber: null,
        type: null,
        specise: null,
        name: null,
        supplierName: null,
      },
      //所选择的要导出的投入品数据
      selectedData: [],
      //是否选择全部
      isSelectAll: false,
      json_fields: {
        投入品ID: {
          field: "id",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        供应商ID: {
          field: "supplierId",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        投入品名称: "name",
        投入品照片: "picture",
        投入品品种: "species",
        投入品类型: "type",
        供应商名称: "supplierName",
        包装类型: "packageType",
        规格: "specification",
        // 单位: "unit",
        单价: "unitPrice",
        二维码: "qrCode",
        // 是否上架: "onShelf",
        创建时间: "gmtCreate",
      },
    };
  },
  computed: {
    ...mapState({
      supplylist: (state) => state.productionInfo.ShopSupplyInfo,
      rules: (state) => state.productionInfo.rules,
      supplierlist: (state) => state.productionInfo.suppliersList,
      specificationList: (state) => state.productionInfo.specificationList,
      gradeList: (state) => state.productionInfo.gradeList,       //等级规格
    }),
  },
  created() {
    this.getTableInfo();
  },
  methods: {
    ...mapActions("productionInfo", [
      "getSupplyInfo",
    ]),
    async getTableInfo() {
      const { data: res } = await getShopSupplyByPage(
        this.page.pageSize,
        this.page.current
      );
      console.log(res);
      if (res.statusCode === 20000) {
        console.log(res.data.records);
        this.tableData = res.data.records;
        this.page.total = res.data.total;
        this.productionInfo();
      }
    },
    //获取所要删除的投入品
    selectData(list) {
      this.selectList.push(list.map((list) => {
        return list.id;
      }));
    },
    downLoadExcel() {
      if (!this.isSelectAll) {
        this.selectedData = [];
        this.selectList.map((v) => {
          this.tableData.map((i) => {
            if (i.id === v) {
              this.selectedData.push(i);
            }
          });
        });
        return;
      }
      let name = "投入品信息";
      this.isSelectAll = false;
      let path = `http://120.77.156.205:9603/breed/merchant/supply/excel/download?fileName=${name}`;
      window.open = path;
    },
    selectAllEvent() {
      this.isSelectAll = true;
    },
    async removeBatch() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选投入品信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteShopSupplyBatch(this.selectList);
      if (res.statusCode === 20000) {
        this.$message.success("批量删除成功");
        this.getTableInfo();
      }
    },
    closeEvent() {
      this.$refs.formRef.resetFields();
      this.$refs.addressRef.closeEvent();
      this.addInfo.region = '';
    },
    closeEvent1() {
      this.$refs.addRef.resetFields();
      this.$refs.addressRef.closeEvent();
      this.addInfo.qrCode = "";
    },
    editEvent(row) {
      console.log(row);
      this.areaObject.province = row.province;
      this.areaObject.city = row.city;
      this.areaObject.region = row.region;
      this.editInfo = row;
      this.editDialogVisible = true;
    },
    getArea(obj) {
      console.log(obj);
      this.editInfo.province = obj.province;
      this.editInfo.city = obj.city;
      this.editInfo.region = obj.region;
      this.addInfo.province = obj.province;
      this.addInfo.city = obj.city;
      this.addInfo.region = obj.region;
    },
    handleAvatarSuccess(res) {
      let pic = JSON.parse(res.data);
      this.addInfo.qrCode = pic.url;
      this.editInfo.qrCode = pic.url;
      console.log(this.addInfo.qrCode);
    },
    handlePictureSuccess(res) {
      let pic = JSON.parse(res.data);
      this.addInfo.picture = pic.url;
      this.editInfo.picture = pic.url;
      this.$message.success("上传成功");
      console.log(this.addInfo.picture);
    },
    async addSupplyEvent() {
      console.log(this.addInfo);
      const { data: res } = await addShopSupply(this.addInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.getTableInfo();
        this.$message.success("增加成功");
        this.dialogVisible = false;
      }
    },
    changeEvent(index) {
      console.log(index);
      this.editInfo.supplierName = this.supplierlist[index].supplierName;
      this.editInfo.supplierId = this.supplierlist[index].id;
    },
    changeEvent1(index) {
      this.addInfo.supplierName = this.supplierlist[index].supplierName;
      this.addInfo.supplierId = this.supplierlist[index].id;
    },
    async editShopSupply() {
      console.log(this.editInfo);
      const { data: res } = await editSupply(this.editInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("修改成功");
        this.getTableInfo();
        this.editDialogVisible = false;
      }
    },
    editqrCodeSuccess(res) {
      let pic = JSON.parse(res.data);
      this.editInfo.qrCode = pic.url;
    },
    async getOneSupply(id) {
      const { data: res } = await getOneSupplyInfo(id);
      console.log(res.data);
      this.editInfo = res.data;
      this.areaObject.province = res.data.province;
      this.areaObject.city = res.data.city;
      this.areaObject.region = res.data.region;
      this.editInfo.id = id;
      delete this.editInfo.gmtCreate;
      delete this.editInfo.enterpriseId;
      delete this.editInfo.gmtModified;
      this.editDialogVisible = true;
    },
    async removeOne(id) {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选投入品信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteShopSupply(id);
      if (res.statusCode === 20000) {
        this.$message.success("删除投入品信息成功");
      }
    },
    changePictureSuccess(res) {
      let pic = JSON.parse(res.data);
      this.editInfo.picture = pic.url;
    },
    expandQrCode(url) {
      this.qrCodePic = url;
      this.srcList.push(url);
      this.picDialogVisible = true;
    },
    resetSerch() {
      this.isSearchMap = false;
      for (let key in this.searchMap) {
        this.searchMap[key] = '';
      }
      this.getTableInfo();
    },
    async fuzzyQuery() {
      console.log(this.searchMap);
      let obj = {};
      // 将用户想要模糊查询的属性写入对象
      for (let key in this.searchMap) {
        if (this.searchMap[key]) {
          obj[key] = this.searchMap[key];
        }
      }
      const { data: res } = await vagueSearchShopSupply(
        obj,
        this.pageSize,
        this.page.current
      );
      console.log(res);
      this.isSearchMap = true;
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
  },
};
</script>

<style >
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
.demo-image__preview {
  width: 100%;
  /* background-color: #409eff; */
}
.el-image {
  height: 350px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.supplyPic {
  width: 110px;
  height: 110px;
}
</style>>